<template>
    <div>
        <el-header>关键字回复</el-header>
        <div>
            <div>
                <div>回复类型:
                    <el-select v-model="value" @change="seleFun" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div>关键字:
                    <el-input v-model="input" style="width:300px" placeholder="请输入内容"></el-input>
                    <el-button type="primary" @click="souFun" icon="el-icon-search"></el-button>
                </div>
            </div>
            <el-button type="primary" icon="el-icon-plus" @click="addFun">添加关键字</el-button>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="id"
                label="ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="key"
                label="关键字"
                width="180">
                </el-table-column>
                <el-table-column
                prop="typeName"
                label="回复类型"
                width="180">
                </el-table-column>
                <el-table-column
                prop="status"
                label="是否显示"
                width="300">
                    <template slot-scope="scope">
                        <Vxswitch :sta-tus="scope.row.status"></Vxswitch>
                    </template>
                </el-table-column>
                
                <el-table-column
                fixed="right"
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button @click="elitClick(scope.row)" type="text" size="small">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="count"
                @prev-click="prevclick"
                @next-click="nextclick">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {keylist,keydele} from '../../../api/vxapi'
import Vxswitch from '../../../components/vxswitch.vue' 
export default {
    components:{
        Vxswitch
    },
    data() {
        return {
            value:'',
            input: '',
            options:[{
                value: 'text',
                label: '文字消息'
            },{
                value: 'image',
                label: '图片消息'
            },{
                value: 'news',
                label: '图文消息'
            },{
                value: 'voice',
                label: '声音消息'
            }],
            count:0,
            page:1,
            limit:20,
            type:'',
            key:'',
            tableData:[]
        }
    },
    created() {
        this.keylistFun()
    },
    methods: {
        // 添加关键字
        addFun(){
            this.$router.push({path:'/keyword/keyAdd',query:{'title':"添加关键字"}})
        },
        // 编辑
        elitClick(row){
            this.$router.push({path:'/keyword/keyAdd',query:{id:row.id,title:'编辑关键字'}})
        },
        // 删除
        handleClick(row) {
            console.log(row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                keydele(row.id).then((res)=>{
                    if(res.data.status==200){
                        this.keylistFun()
                    }
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //下拉回复类型
        seleFun(){
            this.type=this.value
            this.keylistFun()
        },
        // 关键字搜索
        souFun(){
            this.key=this.input
            this.keylistFun()
        },
        // 获取数据
        keylistFun(){
            keylist({key:this.key,type:this.type,page:this.page,limit:this.limit})
            .then((res)=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.count=res.data.data.count
                    this.tableData=res.data.data.list
                }
            })
        },
        //输入框改变页码 
        handleCurrentChange(val) { 
            this.page=val
            this.listFun()
        },
        // 上一页
        prevclick(val){
            this.page=val
            this.listFun()
        },
        // 下一页
        nextclick(val){
            this.page=val
            this.listFun()
        },
    },
}
</script>
<style lang="scss" scoped>
.el-header{
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
</style>